<template>
  <div class="container">
    <div class="chart-preview">
      <div style="clear: both;"></div>
      <div class="view-canvas">
        <div
            id="container"
            :style="{ width: 100 * scale + '%', height: '500px' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import BpmnViewer from 'bpmn-js/lib/Viewer';

export default {
  name:"BpmnViewer",
  data() {
    return {
      containerEl: null,
      bpmnModeler: null,
      scale: 1,

    };
  },
  // watch:{
  //   'currentCanvasXml':{
  //     handler:function (newValue,oldValue) {
  //       this.$nextTick(() => {
  //         console.log(newValue,newValue)
  //         this.previewTemp();
  //       });
  //     }
  //   }
  // },
  props:{
    taskList:{
      require:true,
      type:Array
    },
    currentCanvasXml: '',
  },
  methods: {
    handleZoom(flag) {
      if (flag < 0 && this.scale <= 1) {
        return;
      }
      this.scale += flag;
      this.$nextTick(() => {
        this.bpmnModeler.get('canvas').zoom('fit-viewport');
      });
    },
    previewTemp() {
      this.containerEl = document.getElementById('container');
      this.bpmnModeler && this.bpmnModeler.destroy();
      this.scale = 1;
      this.bpmnModeler = new BpmnViewer({ container: this.containerEl });
      const viewer = this.bpmnModeler;
      this.bpmnModeler.importXML(this.currentCanvasXml, (err) => {
        if (err) {
          console.error(err);
        } else {
          const canvas = viewer.get('canvas');
          canvas.zoom('fit-viewport');

          this.taskList.forEach(task=>{
            canvas.addMarker(task.taskDefinitionKey,task.taskState)
          })

          const eventBus = this.bpmnModeler.get('eventBus');
          const overlays = this.bpmnModeler.get('overlays');
          eventBus.on('element.hover', (e) => {
            console.log(e.element.type)
            if (e.element.type === 'bpmn:Task'||e.element.type === 'bpmn:UserTask') {
              const overlayHtml = `<div class="tipBox">你好，我是悬浮框里的内容</div>`;
              overlays.add(e.element.id, {
                position: { top: e.element.height, left: 0 },
                html: overlayHtml,
              });
            }
          });

          eventBus.on('element.out', () => {
            overlays.clear();
          });
        }


      });
    },
  },
};
</script>

<style lang="scss">
.container {
  .tipBox {
    width: 200px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    padding: 12px;
  }
}
.Rejected {
  fill: red !important;
  stroke: red!important;
  fill-opacity: 1%!important;
}

.Rejected.djs-shape .djs-visual > * {
  fill: red!important;
  stroke: red!important;
  fill-opacity: 1%!important;
}

.Rejected.djs-shape .djs-visual > path {
  fill: red!important;
  fill-opacity: 1%!important;
  stroke: red!important;
}

.Rejected:not(.djs-connection) .djs-visual > * {
  fill: red!important; /* color elements as green */
}

// 流程图文字
.Completed {
  fill: green !important;
  stroke: green!important;
  fill-opacity: 1%!important;
}

//流程图图标
.Completed.djs-shape .djs-visual > * {
  fill: green!important;
  stroke: green!important;
  fill-opacity: 1%!important;
}

.Completed.djs-shape .djs-visual > path {
  fill: green!important;
  fill-opacity: 1%!important;
  stroke: green!important;
}

.Completed:not(.djs-connection) .djs-visual > * {
  fill: green!important; /* color elements as green */
}

// 流程图文字
.Active {
  fill: #1897FFF0 !important;
  stroke: #1897FFF0!important;
  fill-opacity: 1%!important;
}

//流程图图标
.Active.djs-shape .djs-visual > * {
  fill: #1897FFF0!important;
  stroke: #1897FFF0!important;
  fill-opacity: 1%!important;
}

.Active.djs-shape .djs-visual > path {
  fill: #1897FFF0 !important;
  fill-opacity: 1%!important;
  stroke: #1897FFF0 !important;
}

.Active:not(.djs-connection) .djs-visual > * {
  fill: #1897FFF0!important; /* color elements as #1897FFF0 */
}

</style>
